<template>
  <div class="ratio" v-show="show">
    <div class="box">
      <div class="head">
        <span class="title">对比栏</span>
        <span class="info"
          ><i class="el el-icon-warning"></i> 最大对比案件数3件</span
        >
      </div>
      <div class="body">
        <div class="body-left">
          <div class="item" v-for="(item, index) in list" :key="index">
            <i class="el el-icon-close" @click="close(item.id, index)"></i>
            <div class="msg">
              <span class="left">专利号：</span>
              <span class="right">{{ item.id }}</span>
            </div>
            <div class="msg">
              <span class="left">专利名称：</span>
              <span class="right">{{ item.msg }}</span>
            </div>
          </div>
        </div>
        <div class="body-right">
          <el-button type="primary" size="small" @click="compareCases">
            <i class="fa fa-exchange" aria-hidden="true"></i>
            开始对比
          </el-button>
          <el-button size="small" @click="isClear">
            <i class="fa fa-trash-o" aria-hidden="true"></i>
            清空对比栏
          </el-button>
        </div>
      </div>
      <el-dialog
        title="对比栏"
        :visible.sync="dialogTableVisible"
        :modal="!dialogTableVisible"
        width="60%"
      >
        <div
          class=""
          style="width: 100%; display: flex; justify-content: space-between"
        >
          <div style="width: 30%; line-height: 35px">
            <table style="width=100%;margin-left: 70px;">
              <tr>
                <td class="left_title bottom_border">主分类号</td>
              </tr>
              <tr>
                <td class="left_title bottom_border">主审员</td>
              </tr>
              <tr>
                <td class="left_title bottom_border">决定号</td>
              </tr>
              <tr>
                <td class="left_title bottom_border">决定日</td>
              </tr>
              <tr>
                <td class="left_title bottom_border">决定结果</td>
              </tr>
              <tr>
                <td class="left_title bottom_border">参审员</td>
              </tr>
              <tr>
                <td class="left_title bottom_border">发明创造名称</td>
              </tr>
              <tr>
                <td class="left_title bottom_border">合议组长</td>
              </tr>
              <tr>
                <td class="left_title bottom_border">国际分类号</td>
              </tr>
              <tr>
                <td class="left_title bottom_border">复审请求人</td>
              </tr>
              <tr>
                <td class="left_title bottom_border">案件编号</td>
              </tr>
              <tr>
                <td class="left_title bottom_border">案源处室</td>
              </tr>
              <tr>
                <td class="left_title bottom_border">申请人</td>
              </tr>
              <tr>
                <td class="left_title bottom_border">申请号</td>
              </tr>
              <tr>
                <td class="left_title bottom_border">申请日</td>
              </tr>
            </table>
          </div>
          <div v-for="(item, index) in duibiList" :key="index" style="">
            <table style="width=100%;line-height: 35px;">
              <tr>
                <td class="black_title">
                  {{ item.主分类号 != "" ? item.主分类号 : "/" }}
                </td>
              </tr>
              <tr>
                <td class="black_title">
                  {{ item.主审员 != "" ? item.主审员 : "/" }}
                </td>
              </tr>
              <tr>
                <td class="td_content">
                  {{ item.决定号 != "" ? item.决定号 : "/" }}
                </td>
              </tr>
              <tr>
                <td class="td_content">
                  {{ item.决定日 != "" ? item.决定日 : "/" }}
                </td>
              </tr>
              <tr>
                <td class="td_content">
                  {{ item.决定结果 != "" ? item.决定结果 : "/" }}
                </td>
              </tr>
              <tr>
                <td class="td_content">
                  {{ item.参审员 != "" ? item.参审员 : "/" }}
                </td>
              </tr>
              <tr>
                <td class="td_content">
                  {{ item.发明创造名称 != "" ? item.发明创造名称 : "/" }}
                </td>
              </tr>
              <tr>
                <td class="td_content">
                  {{ item.合议组长 != "" ? item.合议组长 : "/" }}
                </td>
              </tr>
              <tr>
                <td class="td_content">
                  {{ item.国际分类号 != "" ? item.国际分类号 : "/" }}
                </td>
              </tr>
              <tr>
                <td class="td_content">
                  {{ item.复审请求人 != "" ? item.复审请求人 : "/" }}
                </td>
              </tr>
              <tr>
                <td class="td_content">
                  {{ item.案件编号 != "" ? item.案件编号 : "/" }}
                </td>
              </tr>
              <tr>
                <td class="td_content">
                  {{ item.案源处室 != "" ? item.案源处室 : "/" }}
                </td>
              </tr>
              <tr>
                <td class="td_content">
                  {{ item.申请人 != "" ? item.申请人 : "/" }}
                </td>
              </tr>
              <tr>
                <td class="td_content">
                  {{ item.申请号 != "" ? item.申请号 : "/" }}
                </td>
              </tr>
              <tr>
                <td class="td_content">
                  {{ item.申请日 != "" ? item.申请日 : "/" }}
                </td>
              </tr>
            </table>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    },
    duibiList: {
      type: Array,
      required: true
    },
    show: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      dialogTableVisible: false
    };
  },
  methods: {
    isClear() {
      this.$emit("update:list", []);
      this.$emit("update:show", false);
    },
    close(item, index) {
      this.list.splice(index, 1);
      this.$emit("update:list", this.list);
    },
    //开始对比
    compareCases() {
      console.log(this.duibiList);
      this.dialogTableVisible = true;
      // let data = {};
      // this.$router.push({ path: "/pages/carousel", query: { data: data } });
    }
  }
};
</script>
<style lang="scss" scoped>
.ratio {
  width: 100%;
  height: 186px;
  position: fixed;
  bottom: 0;
  background-color: #ebeef5;
  z-index: 2;
  border-top: 1px solid #ebeef5;
  .box {
    width: 1200px;
    margin: 0 auto;
    height: 100%;

    .head {
      width: 100%;
      display: flex;
      margin: 20px 0;
      height: 20px;
      border-left: 4px solid #2d54b8;
      box-sizing: border-box;
      padding-left: 10px;

      .title {
        font-size: 16px;
        font-weight: bolder;
        margin-right: 20px;
        display: inline-block;
      }

      .info {
        font-size: 14px;
        line-height: 16px;
        color: #c0c4cc;
      }
    }

    .body {
      width: 100%;
      height: 130px;
      display: flex;
      justify-content: space-between;

      .body-left {
        border-right: 1px solid #dcdfe6;
        height: 110px;
        .item {
          width: 333px;
          background-color: #fff;
          border-radius: 10px;
          position: relative;
          padding: 20px 20px 0 20px;
          box-sizing: border-box;
          display: inline-block;
          margin-right: 20px;

          .el-icon-close {
            font-weight: bolder;
            font-size: 20px;
            color: #909399;
            position: absolute;
            top: 10px;
            right: 10px;
          }

          .msg {
            width: 100%;
            font-size: 14px;
            color: #909399;
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;

            span {
              display: inline-block;
            }

            .left {
              width: 70px;
              text-align: right;
              float: left;
            }
            .right {
              float: right;
              width: calc(100% - 80px);
              text-overflow: -o-ellipsis-lastline;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
        }
      }

      .body-right {
        height: 110px;
        padding: 10px 0px 10px 20px;
        box-sizing: border-box;
        width: 140px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .el-button {
          width: 100%;
          margin: 0;
          font-size: 14px;

          .fa {
            font-size: 16px;
            margin-right: 6px;
          }
        }
      }
    }
  }
}
</style>
